<!--
 * @Author: your name
 * @Date: 2020-12-15 16:59:04
 * @LastEditTime: 2020-12-18 09:22:11
 * @LastEditors: Please set LastEditors
 * @Description: 配置 --- 报表页面
 * @FilePath: \gitee-WeBi\pages\config_reportForm\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css begin -->
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../css/animation/animation.css">
    <link rel="stylesheet" href="../../css/main/main.css">
    <link rel="stylesheet" href="../../css/zz/config_reportForm/index.css">
    <!-- css end -->
    <title>Document</title>
</head>

<body>

<div id="zz-main_iframe">
  <div class="zz-iframe-fluid">
      <div class="zz-iframe-fluid_content">
          <!-- 标题栏 -->
          <div class="zz-titleBar has-el-tab">
              <el-tabs v-model="activeIndex">
                  <el-tab-pane name="0">
                      <span slot="label" v-text="'报表列表'"></span>
                  </el-tab-pane>
                  <el-tab-pane name="1">
                      <span slot="label" v-text="'字段库'"></span>
                  </el-tab-pane>
              </el-tabs>
          </div>
          <!-- 报表列表 -->
          <div class="zz-pd_0_16" v-show="activeIndex=='0'">
            <!-- 筛选区域 -->
            <div class="zz-fliterArea">
              <el-form>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="报表分类:">
                      <el-select></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="数据来源:">
                      <el-select></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="报表名称:">
                      <el-input>
                        <el-button slot="append" type="primary">搜索</el-button>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <!-- <el-button type="primary">搜索</el-button> -->
                    <el-button type="primary" @click="addNewReportForm">新增</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 表格 -->
            <el-table :data="pageList[activeIndex].tableData">
              <el-table-column
                :label="indexName"
                type="index"
                :index="indexMethod"
              >
              </el-table-column>
              <el-table-column
                label="名称"
              >

              </el-table-column>
              <el-table-column
                label="分类"
              >

              </el-table-column>
              <el-table-column
                label="字段数"
              >

              </el-table-column>
              <el-table-column
                label="类型"
              >

              </el-table-column>
              <el-table-column
                label="数据来源"
              >

              </el-table-column>
              <el-table-column
                label="状态"
              >

              </el-table-column>
              <el-table-column
                label="最后一次获取时间"
              >

              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template v-slot:default="{ row } = slot">
                  <span class="zz-btn_txt">下载模板</span>
                  <span class="zz-btn_txt">上传</span>
                  <span class="zz-btn_txt">编辑</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="zz-pagenation-wrap">
              <el-pagination
                :current-page="pageList[activeIndex].currentPage"
                :page-size="pageList[activeIndex].pageSize"
                layout="total,prev,pager,next,jumper"
                :total="pageList[activeIndex].total"
                @current-change="currentPageChange"
                @prev-click="prevPageChange"
                @next-click="nextPageChange"
              >
            </div>  
          </div>
          <!-- 字段库 -->
          <div class="zz-pd_0_16" v-show="activeIndex=='1'">
            <!-- 筛选区域 -->
            <div class="zz-fliterArea">
              <el-form>
                <el-row>
                  <el-col :span="6">
                    <el-tooltip content="字段库名称：" placement="top-start">
                      <el-form-item label="字段库名称：">
                        <el-input
                          placeholder="字段库名称">
                          <el-button slot="append" type="primary">搜索</el-button>
                        </el-input>
                      </el-form-item>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="6">
                    <!-- <el-button type="primary">搜索</el-button> -->
                    <el-button type="primary" @click="add_pb_info">新增</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 表格 -->
            <el-table :data="pageList[activeIndex].tableData">
              <el-table-column
                :label="indexName"
                type="index"
                :index="indexMethod"
              >
              </el-table-column>
              <el-table-column
                label="名称"
              >

              </el-table-column>
              <el-table-column
                label="字段数"
              >

              </el-table-column>
              <el-table-column
                label="数据获取方式"
              >

              </el-table-column>
              <el-table-column
                label="状态"
              >

              </el-table-column>
              <el-table-column
                label="最后一次编辑时间"
              >

              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template v-slot:default="{ row } = slot">
                  <!-- <span class="zz-btn_txt">下载模板</span>
                  <span class="zz-btn_txt">上传</span> -->
                  <span class="zz-btn_txt" @click="modify_pb_info">编辑</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="zz-pagenation-wrap">
              <el-pagination
                :current-page="pageList[activeIndex].currentPage"
                :page-size="pageList[activeIndex].pageSize"
                layout="total,prev,pager,next,jumper"
                :total="pageList[activeIndex].total"
                @current-change="currentPageChange"
                @prev-click="prevPageChange"
                @next-click="nextPageChange"
              >
            </div> 
          </div>
      </div>
  </div>
  <!-- 字段库_(新增、编辑)弹层 -->
  <el-dialog
  width="520px"
  :visible.sync="pb_dia_visible"
  :modal-append-to-body="false"
  :append-to-body="true"
  :lock-scroll="true"
  :close-on-click-modal="false"
  @close=""
  top="7vh"
  center
  class=""
  >
    <!-- 弹层标题 -->
    <div
    slot="title"
    class="dialog-title zz-clamp"
    :title="pb_dia_title"
    >{{pb_dia_title}}</div>
    <!-- 弹层内容 -->
    <!-- 新增字段 -->
    <div v-if="pb_dia_type=='add'">
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字段名：">
              <el-input placeholder="请输入字段名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="别名：">
              <el-input placeholder="请输入别名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="说明：">
              <el-input 
                placeholder="请输入字段说明"
                type="textarea"
                :rows="4"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="属性：">
              <el-radio-group v-model="radio">
                <el-radio :label="3">文本</el-radio>
                <el-radio :label="6">数值</el-radio>
                <el-radio :label="9">时间</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 编辑字段 -->
    <div v-if="pb_dia_type=='modify'">
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字段库名：">
              <el-input placeholder="请输入字段库名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="获取方式：">
              <el-popover
              placement="right"
              width="520"
              trigger="manual"
              v-model="pb_getway_dataset"
              >
              <!-- 弹出层内容 -->
              <div class="popover-title big zz-df zz-df-jc-sb">
                <span class="title">数据库</span>
                <span class="zz-btn_txt">确定</span>
              </div>
              <div class="content">
                <div class="zz-pd_14_24_20">
                  <el-form>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="类型：">
                          <el-input placeholder="请选择数据库类型"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="地址：">
                          <el-input placeholder="请输入数据库IP"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="端口：">
                          <el-input placeholder="请输入端口"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="数据库：">
                          <el-input placeholder="请输入数据库名称"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="账号：">
                          <el-input placeholder="请输入数据账号"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="密码：">
                          <el-input placeholder="请输入数据库密码"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
                <!-- <div class="zz-df zz-df-jc-c">
                  <el-button @click="pb_getway_dataset = false">关闭</el-button>
                </div> -->
              </div>
              <!--  -->
              <!-- 触发弹层的元素 -->
              <el-select 
                slot="reference"
                v-model="pb_dia_getway"
                placeholder="选择数据获取方式"
                @change="pb_select_datagetway">
                <el-option
                  v-for="(item,index) in pb_data_getways"
                  :key="index"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
              </el-popover><!-- 
              <el-select 
                v-model="pb_dia_getway"
                placeholder="选择数据获取方式">
                <el-option
                  v-for="(item,index) in pb_data_getways"
                  :key="index"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字段：">
              <zz-tag>666渣渣辉666</zz-tag>
              <zz-tag type="primary">666渣渣辉666</zz-tag>
              <zz-tag type="add">666渣渣辉666</zz-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
    <el-button>关&nbsp;闭</el-button>
    <el-button type="primary">确&nbsp;定</el-button>
    </div>
  </el-dialog>
  
</div>


    <!-- script begin -->
    <script src="../../js/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script src="../../js/underscore/underscore-min.js"></script>
    <script src="../../js/vue/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../js/vue/components/zzTag/zzTag.js"></script>
    <script src="../../js/vue/mixins/basicInfo.js"></script>
    <script src="../../js/vue/mixins/zzSetRem.js"></script>
    <script src="../../js/vue/mixins/list.js"></script>
    <script src="../../js/axios/axios.min.js"></script>
    <script src="../../js/zz/tool/tool.js"></script>
    <script src="../../js/zz/time/time.js"></script>
    <script src="../../js/zz/request/index.js"></script>
    <script src="../../js/zz/config_reportForm/index.js"></script>
    <!-- script end -->
</body>

</html>